@extends('admin.layout.main')
@section('content')
    <!-- daterange picker -->
    <link rel="stylesheet" href="{{asset('/adminlte/plugins/daterangepicker/daterangepicker.css')}}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{asset('/adminlte/plugins/iCheck/all.css')}}">
    <style type="text/css">
      .left-filter{margin-left:8px;}
      img{
        cursor: pointer;  
        transition: all 0.6s;  
      }
      img:hover{  
        transform: scale(10);  
      } 
    </style>
    <section class="content-header">
      <h1>每日用户统计<span style="font-size:15px"> {{$period}}</span></h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 每日统计</a></li>
        <li class="active">每日用户统计</li>
      </ol>
    </section>
    <section class="content">
        <a type="button" class="btn btn-info pull-left filter-user" href="javascript:void(0)"><i class="fa fa-fw fa-search"></i>筛选</a>
        <div class="row">
            <div class="col-md-3">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>

                  <h3 class="box-title">新增用户：{{$total}}人</h3>

                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div id="bar-chart" style="height: 300px;"></div>
                </div>
                <!-- /.box-body-->
              </div>
            </div>

            <div class="col-md-8">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-fw fa-list-alt"></i>

                  <h3 class="box-title">用户详情：</h3>

                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                      <th>ID</th>
                      <th>用户名</th>
                      <th>头像</th>
                      <th>注册时间</th>
                      <th>推荐代理</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if($users)
                      @foreach($users as $user)
                        <tr>
                          <td>{{$user->userid}}</td>
                          <td>{{base64_decode($user->name)}}</td>
                          <td><img src="{{$user->headimg}}" style="width:20px"></td>
                          <td>{{$user->created_at}}</td>
                          <td>@if($user->userAgent) {{$user->userAgent->realname}} @endif</td>
                        </tr>
                      @endforeach
                    @endif  
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
        </div>    
    </section>
    <!-- datepicker -->
    <script src="{{asset('/adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/chartjs/Chart.min.js')}}"></script>
    <!-- date-range-picker -->
    <script src="{{asset('/js/moment.min.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/daterangepicker/daterangepicker.js')}}"></script>
    <!-- iCheck 1.0.1 -->
    <script src="{{asset('/adminlte/plugins/iCheck/icheck.min.js')}}"></script>
    <!-- DataTables -->
    <script src="{{asset('/adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('/adminlte/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
    <!-- FLOT CHARTS -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.min.js')}}"></script>
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.resize.min.js')}}"></script>
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.pie.min.js')}}"></script>
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <script src="{{asset('/adminlte/plugins/flot/jquery.flot.categories.min.js')}}"></script>
    <script type="text/javascript">
        $(function () {
          var data = {!! $data !!};
          if (data.length) {
            var bar_data = {
              data: data,
              color: "#38A0F0"
            };
            $.plot("#bar-chart", [bar_data], {
              grid: {
                borderWidth: 1,
                borderColor: "#f3f3f3",
                tickColor: "#f3f3f3"
              },
              series: {
                bars: {
                  show: true,
                  barWidth: 0.5,
                  align: "center"
                }
              },
              xaxis: {
                mode: "categories",
                tickLength: 0
              }
            });
          }
        });

        $(function () {
          $('#example2').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "processing": true,
            language: {  
              "sProcessing": "处理中...",  
              "sLengthMenu": "显示 _MENU_ 项结果",  
              "sZeroRecords": "没有匹配结果",  
              "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",  
              "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",  
              "sInfoFiltered": "(由 _MAX_ 项结果过滤)",  
              "sInfoPostFix": "",  
              "sSearch": "搜索:",  
              "sUrl": "",  
              "sEmptyTable": "表中数据为空",  
              "sLoadingRecords": "载入中...",  
              "sInfoThousands": ",",  
              "oPaginate": {  
                  "sFirst": "首页",  
                  "sPrevious": "上页",  
                  "sNext": "下页",  
                  "sLast": "末页"  
              },  
              "oAria": {  
                  "sSortAscending": ": 以升序排列此列",  
                  "sSortDescending": ": 以降序排列此列"  
              }  
            }  
          });
        });

        $('.filter-user').click(function(){
          dialog_from('/admin/user_statistic/filter', '筛选');
        });
    </script>
@endsection      